<template>
    <div class="goods-list">
        <!-- <div class="goods-item"  v-for="item in goodslist" :key="item.id">
           <img :src="item.img_url" alt="">
           <h1 class="title">{{item.title}}</h1>
           <div class="info">
              <p class="price">               
               <span class="now">￥{{item.sell_price}}</span>
               <span class="old">￥{{item.market_price}}</span>
              </p>
                <p class="sell">               
               <span>热卖中</span>
               <span>剩余{{item.stock_quantity}}</span>
              </p>       
           </div>  
                       有后台数据的时候的做法
       </div>
        <mt-button type="danger" size="large" plain @click="next">加载更多</mt-button> -->

       <router-link class="goods-item"  v-for="item in goodslist" :key="item.id" :to="'/home/goodsInfo'+item.id">
           <img :src="item.img_url" alt="">
           <h1 class="title">{{item.title}}</h1>
           <div class="info">
              <p class="price">               
               <span class="now">￥{{item.sell_price}}</span>
               <span class="old">￥{{item.market_price}}</span>
              </p>
                <p class="sell">               
               <span>热卖中</span>
               <span>剩余{{item.stock_quantity}}</span>
              </p>       
           </div>  
                       
       </router-link>
        <mt-button type="danger" size="large" plain >加载更多</mt-button>
      
    </div>


</template>
<script>
export default {
    data(){
        return {
           //pageindex:1,      
            goodslist: [
                {id:1,title:'红米S2 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:2,title:'红米S3 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:3,title:'红米S4 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:4,title:'红米S5 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:5,title:'红米S6 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:6,title:'红米S7 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:7,title:'红米S8 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:8,title:'红米S9 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:9,title:'红米S9++ 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:10,title:'红米S10++ 全网通版 4GB内存 64GB',img_url:'/src/images/xiaomipb.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},
                {id:11,title:'红米S20++ 全网通版 4GB内存 64GB',img_url:'/src/images/xmsj2.jpg',sell_price:9999,market_price:1999,stock_quantity:66666},


            ]
        }
    },
    created() {
       // this.getGoodsList()
    },
    methods:{
        //  getGoodsList(){     //有后台数据的时候调用这个数据
        //      this.$http.get('api/getgoods?pageindex='+pageindex).then(result =>{
        //          if(result.body.status === 0){
        //              this.goodslist = result.body.message
        //          }
        //      })
        //  },
        // next(){
        //     pageindex++                加载下一页
        //     getGoodsList()              
        // }
        // goDateil(id){
        //     this.$router.push({name:'goDateil',params: {id}})
        // }
     }
} 


</script>
<style lang="scss" scoped>
.goods-list{
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
      justify-content: space-between;
    .goods-item{
         display: flex;
        width: 49%;
        border: 1px solid #eee;
        box-shadow: 0 0 8px #999;
        flex-direction: column;
        padding: 2px;
        margin: 4px 0;
          justify-content: space-between;
        img{
            width: 100%;
        }
        .title{
            font-size: 14px;
        }
        .info{
            background-color: #ccc;
            p{
                margin: 0;
                padding: 3px;
            }
            .price{
                .now{
                    font-weight: bold;
                    font-size: 16px;
                    color: red;
                }
                .old{
                    font-weight: normal;
                    font-size: 13px;
                    text-decoration: line-through;
                }
            }
            .sell{
                display: flex;
                justify-content: space-between;
                font-size: 13px;
                span{}
            }
        }
    }

}
</style>
